<script setup lang="ts" name="WidgetPageProperty">
import PageConfig from '../page/public/index.vue'
import useAsideStyle from '../../hooks/useAsideStyle'
import usePropertyTab from '../../hooks/usePropertyTab'
import useDraggableAction from '../../hooks/useDraggableAction'
const { propertyTab, handlePropertyTypeChange } = usePropertyTab()
const emit = defineEmits(['propertyAsideChange', 'propertyChange', 'propertyPageChange'])
const { isWidgetAsideShow, isPropertyAsideShow, isPropertyButtonHover, onMouseenter, onMouseleave } = useAsideStyle()
const props = defineProps({
  pageConfig: { type: Object }
})
const currentModuleConfig: any = ref({})
const pageOptions = toRef(props, 'pageConfig')
const { widgetProperty } = useDraggableAction()
// PC端装修模块属性/页面属性侧边栏显示隐藏点击事件
const propertyToggle = () => {
  isWidgetAsideShow.value = false
  isPropertyAsideShow.value = !isPropertyAsideShow.value
  emit('propertyAsideChange', {
    propertyAsideStatus: isPropertyAsideShow.value,
    widgetAsideStatus: isWidgetAsideShow.value
  })
}
const propertyAsideHidden = () => {
  isPropertyAsideShow.value = false
}
const propertyAsideShow = () => {
  isPropertyAsideShow.value = true
}
// 模块切换时执行事件
const widgetChangeHandler = (item) => {
    console.log(item, '模块切换')
    currentModuleConfig.value.component = shallowRef(widgetProperty.value[`../components/widget/${item.module}/${item.package}/${pageOptions.value.device}/property/index.vue`].default)
    currentModuleConfig.value.config = {}
    currentModuleConfig.value.config.uuid = item.uuid
    currentModuleConfig.value.config.package = item.package
    currentModuleConfig.value.config.default = item.config
    propertyTab.value = 'widgetProperty'
    console.log(currentModuleConfig.value.config)
}
const propertyChangeHandler = (v) => {
  console.log(v, '属性值发生改变')
  emit('propertyChange', v)
}
const propertyPageChangeHandler = (v) => {
  emit('propertyPageChange', v)
}
// 子组件将方法暴露给父组件
defineExpose({ propertyAsideHidden, propertyAsideShow, widgetChangeHandler })
</script>

<template>
  <el-aside :class="['property-aside', 'aside-wrap', isPropertyButtonHover ? 'is-hover' : '']">
    <div class="aside-button" v-if="pageOptions.device === 'pc'" @click="propertyToggle" @mouseenter.prevent="onMouseenter('property')" @mouseleave.prevent="onMouseleave('property')" title="属性配置">
      <svg-icon :icon="isPropertyAsideShow ? 'bi:chevron-bar-right' : 'bi:chevron-bar-left'"></svg-icon>
    </div>
    <el-header>
      <div :class="['config-tab', propertyTab === 'widgetProperty' ? 'is-active' : '']" @click="handlePropertyTypeChange('widgetProperty')">模块属性</div>
      <div :class="['config-tab', propertyTab === 'pageProperty' ? 'is-active' : '']" @click="handlePropertyTypeChange('pageProperty')">页面属性</div>
    </el-header>
    <el-main>
      <el-scrollbar>
        <PageConfig v-if="propertyTab === 'pageProperty'" :pageConfig="pageOptions" @propertyChange="propertyPageChangeHandler"></PageConfig>
        <component v-if="propertyTab === 'widgetProperty' && currentModuleConfig.component" :is="currentModuleConfig.component" :config="currentModuleConfig.config" @change="propertyChangeHandler"></component>
      </el-scrollbar>
    </el-main>
  </el-aside>
</template>

<style scoped lang="scss"></style>
